import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Namer App',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
            seedColor: const Color.fromARGB(255, 255, 3, 3)),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            '宝可梦大集结',
            style: TextStyle(
              color: Color.fromARGB(255, 255, 0, 0),
              fontSize: 24,
            ),
          ),
          backgroundColor: Color.fromARGB(255, 255, 255, 255),
        ),
        body: MyBody(),
      ),
    );
  }
}

class MyBody extends StatelessWidget {
  MyBody({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ColorBlock(),
        Row(
          children: [
            /**
             * Expanded使得子组件可以在父组件上按比例扩展，也就是可以控制占据的比例
             */
            Expanded(
              // flex控制比例
              flex: 3,
              child: ColorBlock(
                height: 100,
                color: Colors.blue,
              ),
            ),
            Expanded(
              flex: 2,
              child: Column(
                children: [
                  ColorBlock(
                    color: Colors.yellow,
                  ),
                  ColorBlock(
                    color: Colors.green,
                  ),
                ],
              ),
            ),
          ],
        )
      ],
    );
  }
}

class ColorBlock extends StatelessWidget {
  final Color color;
  final double height;
  const ColorBlock({super.key, this.color = Colors.red, this.height = 50});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      color: color,
    );
  }
}
